<template>
	<t-modal
		title="导出数据"
		width="700px"
		:visible="visible"
		@ok="confirm"
		@cancel="cancel"
		okText="导出"
		cancelText="关闭">
		<a-spin :spinning="loading">
			<a-form :form="form">
				<a-form-item label="文件名" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="请输入文件名" v-decorator="['fileName', {initialValue: fileNameInitVal, rules: [{required: true,message: '请输入文件名！'}]}]"/>
				</a-form-item>
				<a-form-item label="导出类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select placeholder="请选择导出类型" v-decorator="['modeType',{initialValue: 'Excel.xlsx', rules: [{required: true,message: '请选择导出类型！'}]}]">
						<a-select-option value="Excel.xlsx">
							Excel.xlsx
						</a-select-option>
					</a-select>
				</a-form-item>
				<a-form-item label="标题" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-input placeholder="请输入标题" v-decorator="['fileTile',{initialValue: fileName, rules: [{required: true,message: '请输入标题！'}]}]"/>
				</a-form-item>
				<a-form-item label="导出数量" :labelCol="labelCol" :wrapperCol="wrapperCol">
					<a-select placeholder="请选择导出数量" v-decorator="['number',{initialValue: '3', rules: [{required: true,message: '请选择导出数量！'}]}]">
					<!-- 	<a-select-option value="1">
							当前页全部数据
						</a-select-option>
						<a-select-option value="2">
							当前页数据选中数据
						</a-select-option> -->
						<a-select-option value="3">
							全部数据
						</a-select-option>
					</a-select>
				</a-form-item>
				<div>
					<div style="margin: 20px 0 0 45px;">
						<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
							选择全部
						</a-checkbox>
						<span style="color: red;font-size: 12px;">
							列表数据，系统将导出列表选中字段的数据
						</span>
					</div>
					<a-divider />
					<div class="checkBoxList">
						<a-checkbox-group v-model="checkedValues" :options="fieldData" @change="onChange" />
					</div>
				</div>
			</a-form>
		</a-spin>
	</t-modal>
</template>

<script>
	import Vue from 'vue'
	import { baseUrl } from "@/services/baseUrl.js";
	import { ACCESS_TOKEN } from '@/store/mutation-types'
	export default {
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			fileName: {
				type: String,
				default: '组织机构'
			},
			fieldInfoUrl: {
				type: String
			},
			exportUrl: {
				type: String
			}
		},
		data() {
			return{
				labelCol: {
				  xs: {
				    span: 24,
				  },
				  sm: {
				    span: 4,
				  },
				},
				wrapperCol: {
				  xs: {
				    span: 24,
				  },
				  sm: {
				    span: 20,
				  },
				},
				form: this.$form.createForm(this),
				checkedValues: [],
				checkedLabels: [],
				indeterminate: false,
				checkAll: false,
				fieldData: [],
				fileNameInitVal: ''
			}
		},
		mounted() {
			this.getCurrentDate();
		},
		methods: {
			getCurrentDate(){
				let year = new Date().getFullYear();
				let month = new Date().getMonth();
				let date = new Date().getDate();
				this.fileNameInitVal = this.fileName + '-' + year + '-' + (month+=1) + '-' + date
			},
			confirm(){
				if(!this.fieldInfoUrl){
					this.$message.info("fieldInfoUrl不能为空，请传入获取字段的接口！");
					return
				}
				if(!this.exportUrl){
					this.$message.info("exportUrl不能为空，请传入导出数据的接口！");
					return
				}
				if(!this.checkedValues.length){
					this.$message.info("请选择至少一项列表数据！");
					return
				}
				this.form.validateFields((errors, values) => {
					if (!errors) {
						this.$emit("ok");
						let formData = this.form.getFieldsValue();
						window.location.href =
						  baseUrl +
						  this.exportUrl + "?fileName=" +
						  formData.fileName +
						  "&fileTile=" +
							formData.fileTile +
							"&modeType=" +
							formData.modeType +
							"&pageNumber=" + 
							1 +
							"&uuids=" +
							null +
							"&fieldNotes=" +
							this.checkedValues.toString() +
							"&fieldName=" +
							this.checkedLabels.toString() +
							"&token=" +
							Vue.ls.get(ACCESS_TOKEN);
					}
				})
			},
			cancel(){
				this.$emit("cancel");
			},
			getFieldInfo(){
				if(!this.fieldInfoUrl){
					this.$message.info("fieldInfoUrl不能为空，请传入获取字段的接口！");
					return
				}
				this.fieldData = [];
				this.$post(this.fieldInfoUrl).then(res => {
					if(res.statusCode === 200){
						for(let key in res.data[0]){
							this.fieldData.push({
								label: res.data[0][key],
								value: key
							})
						}
						Object.assign(this, {
							checkedValues: this.fieldData.map(e => e.value),
							checkedLabels: this.fieldData.map(e => e.label),
							indeterminate: false,
							checkAll: true
						});
					}
				})
			},
			onChange(checkedList) {
				this.checkedLabels = [];
				for(let i=0;i<checkedList.length;i++){
					for(let j=0;j<this.fieldData.length;j++){
						if(checkedList[i] === this.fieldData[j].value){
							this.checkedLabels.push(this.fieldData[j].label)
						}
					}
				}
				this.indeterminate = !!checkedList.length && checkedList.length < this.fieldData.length;
				this.checkAll = checkedList.length === this.fieldData.length;
			},
			onCheckAllChange(e) {
				Object.assign(this, {
					checkedValues: e.target.checked ? this.fieldData.map(e => e.value) : [],
					checkedLabels: e.target.checked ? this.fieldData.map(e => e.label) : [],
					indeterminate: false,
					checkAll: e.target.checked
				});
			}
		}
	}
</script>

<style lang="less" scoped="scoped">

	.ant-divider-horizontal{
		margin: 15px 0;
	}
	/deep/.ant-checkbox-group label{
		margin-bottom: 15px !important;
	}
	.checkBoxList{
		margin-left: 45px;
		max-height: 300px;
		overflow: auto;
	}
</style>